<template>
  <SideBar :normalData="normalData" :sideBarData="sideBarData" @changeToOldView="changeToOldView" @menuItemClick="menuItemClick" @submenuSelect="submenuSelect" @plus="plus"></SideBar>
</template>
<script>
  import SideBar from '@/components/public-modules/side-bar/index'
  import { isAllowMergeCustomer, isNotAllowEditCustomerInfo } from '@/utils/customerUtils.js'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'SidebarLeft',
    data () {
      return {
        normalData: {
          'title': '客户管理',
          'showDropDown': true,
          'jumpArr': [
            {'jumpUrl': '/index/customer/merge', 'text': this.$t('public.merge'), show: false},
            {'jumpUrl': '/index/customer/customize', 'text': this.$t('customer.CustomerSearch.CustomizeFastSearch'), show: true},
            {'jumpUrl': '/index/customer/export', 'text': this.$t('customer.uploadTask'), show: true},
            {'jumpUrl': '/index/customer/listQuery', 'text': this.$t('customer.HitSingle'), show: true}
          ]
        },
        tempArr: [
          {'submenuTitle': '我的客户', menu: [{ label: this.$t('public.all'), value: '', type: 'customer_my' }], type: 'customer_my'},
          {'submenuTitle': '联系计划', menu: [{ label: this.$t('public.all'), value: '', type: 'customer_plan' }, { label: this.$t('customer.todayContactPlan'), value: 'totalNotify', type: 'customer_plan', query: {status: 'totalNotify'} }, { label: this.$t('customer.myExecutorPlan'), value: 'executor', type: 'customer_plan', query: {status: 'executor'} }], type: 'customer_plan'},
          {'submenuTitle': '全部', menu: [{ label: this.$t('public.all'), value: '', type: 'customer_all' }], type: 'customer_all'}
        ],
        sideBarData: {
          'defaultActive': 'customer_my',
          'submenuArr': [
            {'submenuTitle': '我的客户', menu: [{ label: this.$t('public.all'), value: '', type: 'customer_my' }], type: 'customer_my'},
            {'submenuTitle': '联系计划', menu: [{ label: this.$t('public.all'), value: '', type: 'customer_plan' }, { label: this.$t('customer.todayContactPlan'), value: 'totalNotify', type: 'customer_plan', query: {status: 'totalNotify'} }, { label: this.$t('customer.myExecutorPlan'), value: 'executor', type: 'customer_plan', query: {status: 'executor'} }], type: 'customer_plan'},
            {'submenuTitle': '全部', menu: [{ label: this.$t('public.all'), value: '', type: 'customer_all' }], type: 'customer_all'}]
        }
      }
    },
    beforeMount () {
      this.searchInit()
      let user = this.$store.state.session.user
      if (!isNotAllowEditCustomerInfo(user) && isAllowMergeCustomer(user)) {
        this.normalData.jumpArr[0].show = true
      }
    },
    computed: {
      quickSearchList () {
        return this.$store.state.customer.quickSearchList
      }
    },
    watch: {
      quickSearchList: { // 自定义检索动态更新
        handler: function (current) {
          this.setSubmenuArr(current.list)
        },
        deep: true
      }
    },
    methods: {
      setDefaultName (data) {
        this.sideBarData.defaultActive = data
      },
      setSubmenuArr (quickSearchTmpls) { // 设置自定义搜索菜单
        let newArr = deepClone(this.tempArr) || []
        newArr.forEach((item, index) => {
          // 自定义快捷搜索
          quickSearchTmpls.forEach(quickSearchTmpl => {
            if (quickSearchTmpl.menu === item.type) {
              newArr[index].menu.push({ label: quickSearchTmpl.kName, isCustomize: true, query: quickSearchTmpl.query, value: quickSearchTmpl._id, type: quickSearchTmpl.menu })
            }
          })
        })
        this.sideBarData.submenuArr = newArr
      },
      plus (value) { // 打开合并客户，撞单查询等页面
        this.$store.commit('customer/SET_CUSTOMER_IS_SHOW_BOX', {isShow: true})
        let path = value
        this.$router.push({path: path})
      },
      searchInit () { // 初始化搜索
        Promise.all([
          this.$store.dispatch('getCache', { type: 'custTmpls' }),
          this.$store.dispatch('getCache', { type: 'quickSearchTmpls',loadFromServer: true })
        ]).then(([custTmpls, quickSearchTmpls]) => {
          if (custTmpls.length <= 0) { // 新开的账户，没有数据
            this.sideBarData.showDropDown = false
          } else {
            this.sideBarData.showDropDown = true
          }
          let arr = quickSearchTmpls ? quickSearchTmpls.reverse() : []
          this.setSubmenuArr(arr)
        })
      },
      changeToOldView () { // 回到旧的卡片列表
        this.$store.dispatch('updateViewSwitch', {module: 'customer', status: 'old'})
        this.$store.commit('IS_NEW_CARD_STYLE', {type: 'customer', data: false})
      },
      submenuSelect (data) {
        this.sideBarData.defaultActive = data
      },
      menuItemClick (data) { // 点击菜单，给右侧组件传递查询的参数
        this.$store.commit('customer/SET_CUSTOMER_IS_SHOW_BOX', {isShow: false})
        const base = {'menu': data.type, 'page': 1, 'morePage': 1, 'limit': 10}
        let queryData = Object.assign({}, base, data.query)
        this.$store.commit('customer/GET_CUSTOMER_QUERY', queryData)
      }
    },
    components: {
      SideBar
    }
  }
</script>
<style lang="stylus">
  @import "../../../assets/common.styl"
  .business-sidebar
    .router-link-active
      li
        color $c-main !important
        background-color #dddee0 !important
</style>
<style lang="stylus">
  @import "../../../assets/common.styl"
  .slideBar-box
    overflow hidden
    border-right 1px solid #ccc
  .operation
    .iconfont
      font-size 18px
      margin 0 2px 0
      color #606266
      cursor pointer
    .icon-gengduo
      font-size 19px
  .sidebar-top
    border-bottom 1px solid #ccc
    padding 0px 6px 0px 15px
    height 40.5px
    line-height 43px
    display flex
    justify-content space-between
  .business-sidebar
    text-align left
    position relative
    background-color #f0f2f3
    width 188px
    height calc(100vh - 90px)
    float left
    .side-scroll
      height calc(100vh - 90px)
    .el-menu
      background-color #f0f2f3
    .sidebar__title
      color #a0a9ad
      padding 10px 0
      border-bottom 1px solid #444c4f
    .el-menu__first
      font-weight bold
    .el-submenu
      .el-menu
        .el-menu-item
          padding-left 20px !important
        .el-menu-item:hover,.el-menu-item:focus
          color $c-main
          background-color #dddee0
    .sidebar-menu > .el-menu__first a li
      padding 15px 0px
      color $cf-gray0
    .sidebar-menu > .el-submenu
      color $cf-gray0
    .sidebar-menu .el-submenu li
      font-weight normal
      color #424242
    .sidebar-menu
      padding-top 5px
      margin-bottom 54px
    .el-menu-item
      height 45px
      line-height 14px
    .el-submenu__title
      height 44px
      line-height 44px
      font-weight bold
      color #000
     .el-submenu__title:hover,.el-submenu__title:focus
       color $c-main
       background-color #dddee0
     .el-submenu .el-menu .el-menu-item
       padding: 8px 0px;
       min-width: 100%;
       height: 30px;
     .config-sidebar__bottom
       position: absolute;
       width: 100%;
       height: 54px;
       bottom: 0px;
       z-index 2;
       background-color: #f5f6f7;
       border-top: 1px solid #e0e0e0;
       box-shadow: 0px -4px 6px -4px rgba(128,128,128,0.2);
       .config-sidebar__bottom-a
         background-color: #459ae9;
         color: #fff;
         border-radius: 4px;
         padding: 3px 7px;
      .el-menu-item:hover, .el-menu-item:focus
        color $c-main !important
        background-color #dddee0
        font-weight bold
</style>
